<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛--注册</TITLE>

	<Link rel="stylesheet" type="text/css" href="style/style.css"/>
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</HEAD>
<BODY>
<DIV>
	<IMG src="image/logo.gif">
</DIV>
<!--      用户信息、登录、注册        -->

<DIV class="h">
	您尚未　<a href="login.jsp">登录</a>
	&nbsp;| &nbsp; <A href="reg.jsp">注册</A> |
</DIV>


<BR/>
<!--      导航        -->
<DIV>
	&gt;&gt;<B><a href="index.html">论坛首页</a></B>
</DIV>
<div id="app">
<!--      用户注册表单        -->
<DIV  class="t" style="MARGIN-TOP: 15px" align="center">
	<div class="preview-box" style="margin-top: 10px;text-align: center;margin-left: -140px">
		<img :src="head" alt="" style="max-width: 100px;max-height: 100px;border: 1px solid #ccc;border-radius: 4px;">
	</div>
	<FORM name="regForm" action="" method="post" style="margin-top: 10px">
		<div style="display: grid;grid-template-columns: 100px 200px auto;gap: 10px;width: 500px">
			<label for="">用户名</label>
			<INPUT class="input" tabIndex="1" type="text" maxLength="20" size="35" v-model="uname">
			<span style="color: red">{{unameError}}</span>
			<label for="">密　码</label>
			<INPUT class="input" tabIndex="2" type="password" maxLength="20" size="40" v-model="upass">
			<span style="color: red">{{upassError}}</span>
			<label for="">重复密码</label>
			<INPUT class="input" tabIndex="3" type="password" maxLength="20" size="40" v-model="upass1">
			<span style="color: red">{{upass1Error}}</span>
			<label for="">性别</label>
				<div>
					女<input type="radio" name="gender" value="1" v-model="gender">
					男<input type="radio" name="gender" value="2" v-model="gender" checked="checked" />
				</div>
			<br>
			<label for="">请选择头像</label>
			<div class="file-upload">
				<el-input placeholder="粘贴图片地址" v-model="head">
					<el-upload slot="append"
							   action="tblUser/upload"
							   :on-success="handleAvatarSuccess"
							   :before-upload="beforeAvatarUpload"
							   :show-file-list="false"
								name="head">
						<el-button icon="el-icon-upload2"></el-button>
					</el-upload>
				</el-input>
				<span style="color: red">{{headError}}</span>
				(优先使用文件中的图片)
			</div>
		</div>
		<img src="image/head/1.gif"/><input type="radio" name="head" value="image/head/1.gif" v-model="head">
		<img src="image/head/2.gif"/><input type="radio" name="head" value="image/head/2.gif" v-model="head">
		<img src="image/head/3.gif"/><input type="radio" name="head" value="image/head/3.gif" v-model="head">
		<img src="image/head/4.gif"/><input type="radio" name="head" value="image/head/4.gif" v-model="head">
		<img src="image/head/5.gif"/><input type="radio" name="head" value="image/head/5.gif" v-model="head">
		<BR/>
		<img src="image/head/6.gif"/><input type="radio" name="head" value="6.gif" v-model="head">
		<img src="image/head/7.gif"/><input type="radio" name="head" value="7.gif" v-model="head">
		<img src="image/head/8.gif"/><input type="radio" name="head" value="8.gif" v-model="head">
		<img src="image/head/9.gif"/><input type="radio" name="head" value="9.gif" v-model="head">
		<img src="image/head/10.gif"/><input type="radio" name="head" value="10.gif" v-model="head">
		<BR/>
		<img src="image/head/11.gif"/><input type="radio" name="head" value="11.gif" v-model="head">
		<img src="image/head/12.gif"/><input type="radio" name="head" value="12.gif" v-model="head">
		<img src="image/head/13.gif"/><input type="radio" name="head" value="13.gif" v-model="head">
		<img src="image/head/14.gif"/><input type="radio" name="head" value="14.gif" v-model="head">
		<img src="image/head/15.gif"/><input type="radio" name="head" value="15.gif" v-model="head">
		<br/>
			<INPUT class="btn" tabIndex="4" type="submit" value="注 册" @click.prevent="reg">
		</FORM>
	</DIV>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			uname:"",
			upass:"",
			upass1:"",
			unameError:"",
			upassError:"",
			upass1Error:"",
			gender: '2',
			headError:"",
			head: 'image/head/1.gif'
		},
		created(){

		},
		methods : {
			handleAvatarSuccess(res,file){
				//el-upload 返回的 res.data => axios res.data.data
				//res.data => webPath
				this.head = res.data;
			},
			beforeAvatarUpload(file){
				const isJPG = file.type.startsWith('image/');
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG){
					this.$message.error('上传头像图片只能是图片格式！');
				}
				if(!isLt2M){
					this.$message.error('上传头像图片大小不能超过 2MB！');
				}
				return isJPG && isLt2M;
			},
			reg(){
				let p=new URLSearchParams();
				p.append("uname",this.uname);
				p.append("upass",this.upass);
				p.append("upass1",this.upass1);
				p.append("gender",this.gender);
				p.append("head",this.head);
				axios.post("tblUser/reg",p).then(res=>{
					//情空报错信息
					let names=["uname","upass","head","upass1"];
					names.forEach(name=>{
						this[name+'Error']="";
					});
					if(res.data.code==1){
						this.$alert(res.data.msg, '系统提示', {
							confirmButtonText: '确定',
							callback: action => {
								location.href="login.html";
							}
						});
					}else{
						res.data.data.forEach(err=>{
							console.log(err);
							names.forEach(name=>{
								if(name==err.field){
									console.log(name+"Error");
									this[name+"Error"]+=err.defaultMessage+";";
								}
							})
						})
					}
				})
			}
		},
		watch: {
			'head': function(head) {
				this.head = head;
			}
		}
	})
</script>
<!--      声明        -->
<BR>
<CENTER class="gray">源辰信息</CENTER>
</BODY>
</HTML>
